<div fxFlex>
<% if (props.layout === 'simple') { -%>
  <app-header [sidenav]="sidenav"></app-header>
<% } -%>
  <mat-sidenav-container fxFill>
<% if (props.layout === 'simple') { -%>
    <mat-sidenav #sidenav mode="over" ngClass.gt-sm="has-border">
<% } else { -%>
    <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="!isMobile" [disableClose]="!isMobile"
                 ngClass.gt-sm="has-border">
      <mat-toolbar color="primary">
        <span translate>APP_NAME</span>
        <div fxFlex></div>
        <div>
<%   if (props.auth) { -%>
          <button mat-icon-button [matMenuTriggerFor]="userMenu">
            <mat-icon>person</mat-icon>
          </button>
          <mat-menu #userMenu="matMenu">
            <mat-list>
              <mat-list-item>
                <span translate>Logged in as</span>&nbsp;<b>{{username}}</b>
              </mat-list-item>
              <mat-divider></mat-divider>
            </mat-list>
            <button mat-menu-item (click)="logout()" translate>Logout</button>
          </mat-menu>
<%   } -%>
        </div>
        <app-language-selector [icon]="true"></app-language-selector>
      </mat-toolbar>
<% } -%>
      <nav>
        <mat-list>
          <mat-divider></mat-divider>
<% if (props.layout === 'side-menu') { -%>
          <a mat-list-item routerLink="/home" routerLinkActive="active" (click)="isMobile && sidenav.close()">
<% } else { -%>
          <a mat-list-item routerLink="/home" routerLinkActive="active" (click)="sidenav.close()">
<% } -%>
            <span translate>Home</span>
          </a>
          <mat-divider></mat-divider>
<% if (props.layout === 'side-menu') { -%>
          <a mat-list-item routerLink="/about" routerLinkActive="active" (click)="isMobile && sidenav.close()">
<% } else { -%>
          <a mat-list-item routerLink="/about" routerLinkActive="active" (click)="sidenav.close()">
<% } -%>
            <span translate>About</span>
          </a>
          <mat-divider></mat-divider>
        </mat-list>
      </nav>
    </mat-sidenav>
    <mat-sidenav-content>
<% if (props.layout !== 'simple') { -%>
      <mat-toolbar color="primary" class="mat-elevation-z6">
        <button class="menu-button" mat-icon-button (click)="sidenav.toggle()" fxHide.gt-sm>
          <mat-icon>menu</mat-icon>
        </button>
        <span>{{title}}</span>
      </mat-toolbar>
<% } -%>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>
